<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/mymenu.css"/>
</head>
<body>
    <div class="bar">
        <div class="m-bar">
            <!-- 歌单区域 -->
            <div class="right">
                <div class="n-lst">

                    <h2 class="title">
                        <a href="javscript:void(0)" class="btn">
                            <p>新建</p>
                        </a>
                        <span class="rtitle">
                            <i class="tri"></i>
                            创建的歌单
                            <sup class="sup">&reg;</sup>
                            <span class="mns">(2)<!--歌曲数--></span>
                        </span>
                    </h2>

                    <ul class="flag">
                        <li class="flag-n fl1">
                            <div class="item">
                                <div class="item-left l1"></div>
                                <p class="name">
                                    <a href="" class="itemtitle">我喜欢的音乐</a>
                                </p>
                                <p class="songnum">4首</p>
                            </div>
                        </li>

                        <li class="flag-n">
                            <div class="item">
                                <div class="item-left l2"><!--歌单图片--></div>
                                <p class="name">
                                    <a href="" class="itemtitle">我的歌单</a>
                                </p>
                                <p class="songnum">200首</p>
                            </div>

                            <div class="btns1">
                                <div class="edit1" title="编辑"><!--编辑图标--></div>
                                <div class="del1" title="删除"><!--删除图标--></div>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="m-lst">
                    <h2 class="title">
                        <span class="rtitle">
                            <i class="tri1"></i>
                            收藏的歌单
                            <sup class="sup">&reg;</sup>
                            <span class="mns">(4)<!--歌曲数--></span>
                        </span>                        
                    </h2>

                    <ul class="flag">
                        <li class="flag-n">
                            <div class="item">
                                <div class="item-left l3"></div>
                                <p class="name">
                                    <a href="" class="itemtitle">【自由灵魂与未来】</a>
                                </p>
                                <p class="songnum">20首</p>
                            </div>
                            <div class="btns2">
                                <div class="edit2" title="编辑"><!--编辑图标--></div>
                                <div class="del2" title="删除"><!--删除图标--></div>
                            </div>
                        </li>
                        <li class="flag-n">
                            <div class="item">
                                <div class="item-left l4"></div>
                                <p class="name">
                                    <a href="" class="itemtitle">年度最热新歌TOP100</a>
                                </p>
                                <p class="songnum">28首</p>
                            </div>
                            <div class="btns3">
                                <div class="edit3" title="编辑"><!--编辑图标--></div>
                                <div class="del3" title="删除"><!--删除图标--></div>
                            </div>
                        </li>
                        <li class="flag-n">
                            <div class="item">
                                <div class="item-left l5"></div>
                                <p class="name">
                                    <a href="" class="itemtitle">前奏秒杀#民谣</a>
                                </p>
                                <p class="songnum">248首</p>
                            </div>
                            <div class="btns4">
                                <div class="edit4" title="编辑"><!--编辑图标--></div>
                                <div class="del4" title="删除"><!--删除图标--></div>
                            </div>
                        </li>
                        <li class="flag-n">
                            <div class="item">
                                <div class="item-left l6"></div>
                                <p class="name">
                                    <a href="" class="itemtitle">【节奏控】带感轻音乐</a>
                                </p>
                                <p class="songnum">314首</p>
                            </div>
                            <div class="btns5">
                                <div class="edit5" title="编辑"><!--编辑图标--></div>
                                <div class="del5" title="删除"><!--删除图标--></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- 歌曲区域 -->
            <div class="left">
                <div class="both">
                    <!-- 上 -->
                    <div class="top">
                        <div class="topbar">
                            <div class="topblock">
                                <div class="leftimg">
                                    <!--歌单头像-->
                                    <img src="../images/pages/mysong/song-d.jpg" alt="" class="msk">
                                </div>
                                <div class="cnt">
                                    <!--详情和标题-->
                                    <div class="cnt-title">
                                        <div class="hd">
                                            <!--歌单标题-->
                                            <div class="cnt-type">  
                                                                                             
                                            </div>
                                            <sup class="cnt-sup">&reg;</sup>                                            
                                            <h2 class="thide">我喜欢的音乐</h2>
                                        </div>
                                        <div class="user">
                                            <!--歌单用户-->
                                            <div class="userimg">
                                                <img src="../images/pages/mysong/user.jpg" alt="">
                                            </div>
                                            <a href="#" hidefocus="true">GodBoy</a>
                                            <label>&nbsp;2017-11-11&nbsp;创建</label>
                                        </div>
                                        <div class="cnt-btns">
                                            <!--歌单按钮-->
                                            <div class="player">
                                                <div class="leftbg"></div>
                                                <div class="playerleft">
                                                    <img src="../images/pages/mysong/play.png" alt="">
                                                    <label>播放</label>
                                                </div>
                                                
                                                <div class="playerright"></div>
                                                <div class="rightbg"></div>
                                            </div>
                                            <button class="add">
                                                <div></div>
                                                收藏
                                            </button>
                                            <button class="share">
                                                <div></div>
                                                分享
                                            </button>
                                            <button class="dwn">
                                                <div></div>
                                                下载
                                            </button>
                                            <button class="pl">
                                                <div></div>
                                                评论
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="toptitle">
                            <div class="toptitle-left">
                                <div class="h1">
                                    <p>歌曲列表</p>
                                </div>
                                <p>4首歌</p>
                            </div>
                            <div class="toptitle-right">
                                <p>播放:&nbsp;<label>1</label>次</p>
                            </div>
                        </div>
                    </div>

                    <!-- 下 -->
                    <div class="bottom">
                        <table class="songtable">
                            <!-- 标题 -->
                            <tr class="tabletitle">
                                <td colspan="2"</td>
                                <td width="290px">
                                    <label>歌曲标题</label>
                                </td>
                                <td width="110px">
                                    <label>时长</label>
                                </td>
                                <td width="110px">
                                    <label>歌手</label>
                                </td>
                                <td>
                                    <label>专辑</label>
                                </td>
                            </tr>
                            <tr class="t1">                                
                                <td width="40px" class="songtag"><label>1</label></td>
                                <td width="40px">
                                    <div class="ply" id="song1" onclick="songnameclick1()"></div>
                                </td>
                                <td>
                                    <label>海阔天空</label>                                    
                                </td>
                                <td>
                                    <div class="bothbar">
                                        <label>05:24</label>
                                        <div class="both">
                                           <div class="add-1"></div>
                                            <div class="songadd"></div>
                                            <div class="songshare"></div>
                                            <div class="songdwn"></div>
                                            <div class="del"></div>
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    <label>Beyond</label>
                                </td>
                                <td>
                                    <label>Beyond 25th Anniversary</label>
                                </td>
                            </tr>
                            <tr>
                                <td class="songtag"><label>2</label></td>
                                <td>
                                    <div class="ply" onclick="songnameclick2()"></div>
                                </td>
                                <td>
                                    <label>一路向北</label>
                                </td>
                                <td>
                                    <div class="bothbar">
                                        <label>04:55</label>
                                        <div class="both">
                                            <div class="add-1"></div>
                                             <div class="songadd"></div>
                                             <div class="songshare"></div>
                                             <div class="songdwn"></div>
                                             <div class="del"></div>
                                         </div>
                                    </div>                                    
                                </td>
                                <td>
                                    <label>周杰伦(Jay Chou)</label>
                                </td>
                                <td>
                                    <label>《头文字D》</label>
                                </td>
                            </tr>
                            <tr class="t1">
                                <td class="songtag"><label>3</label></td>
                                <td>
                                    <div class="ply" onclick="songnameclick3()"></div>
                                </td>
                                <td>
                                    <label>珊瑚海</label>
                                </td>
                                <td>
                                    <div class="bothbar">
                                        <label>04:16</label>
                                        <div class="both">
                                            <div class="add-1"></div>
                                             <div class="songadd"></div>
                                             <div class="songshare"></div>
                                             <div class="songdwn"></div>
                                             <div class="del"></div>
                                         </div>
                                    </div>                                    
                                </td>
                                <td>
                                    <label>周杰伦/Lara梁心颐</label>
                                </td>
                                <td>
                                    <label>·十一月的萧邦</label>
                                </td>
                            </tr>
                            <tr>
                                <td class="songtag"><label>4</label></td>
                                <td>
                                    <div class="ply" onclick="songnameclick4()"></div>
                                </td>
                                <td>
                                    <label>交换余生</label>
                                </td>
                                <td>
                                    <div class="bothbar">
                                        <label>04:36</label>
                                        <div class="both">
                                            <div class="add-1"></div>
                                             <div class="songadd"></div>
                                             <div class="songshare"></div>
                                             <div class="songdwn"></div>
                                             <div class="del"></div>
                                         </div>
                                    </div>                                    
                                </td>
                                <td>
                                    <label>林俊杰</label>
                                </td>
                                <td>
                                    <label>交换余生</label>
                                </td>
                            </tr>
                            <tr class="t1">
                                <td class="songtag"><label>5</label></td>
                                <td>
                                    <div class="ply"></div>
                                </td>
                                <td>test</td>
                                <td>test</td>
                                <td>test</td>
                                <td>test</td>
                            </tr>
                        </table>
                    </div>
                    <!-- 评论 -->
                    <div class="d-bar"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>